<script setup lang="ts">

import LabelBase from "~/components/ai/LabelBase.vue";
import WeChatPayCode from "~/components/payment/WeChatPayCode.vue";
import VerticalMenu from "~/components/navigation/VerticalMenu.vue";
import SelectItems from "~/components/common/SelectItems.vue";

const authStore = useAuthStore()
const {user} = storeToRefs(useAuthStore())

//充值算力额度
const chargeNumber = ref(1000)
const showWechaPayCode = ref(false)
const chargeWindow = ref('account')
const {chargehandle} = useRoute().params
console.log('chargehandle', chargehandle)
chargeWindow.value = chargehandle as string

definePageMeta({
  layout: 'ui-layout',
  validate: async (route: any) => {
    return true
  }
})

interface Amount {
  total: number;
  payer_total?: number;
  currency?: string;
  payer_currency?: string;
}

interface Payer {
  openid: string;
  socketid?: string;
}

interface PayOrder {
  _id: string;
  user_id: string; //user_id,用户id
  out_trade_no: string; //订单号
  description: string;
  channel: string; //支付渠道
  amount: Amount; //金额
  order_status: 0 | 1 | 2; //0:未支付 1:已支付 2:已退款;
  order_create_time: number;
  order_pay_time: number;
  transaction_id: string;
  trade_type: string;
  payer: Payer;  //支付者
}

const records = ref<PayOrder[]>([])

//获取消费记录
const getRecord = async () => {
  records.value = await Client_POST(`/pay/query`,{
    user_id: user.value._id,
    order_status: 1
  }) as PayOrder[]
}
onMounted(async () => {
  await getRecord()
})

type PayOrderKeys = keyof PayOrder;
const tableHeaders: PayOrderKeys[] = ['out_trade_no', 'description', 'amount', 'order_status', 'order_create_time', 'order_pay_time']

</script>

<template>
  <v-container>
    <v-row>
      <v-col cols="3" class="d-flex flex-column">
        <v-card class="my-4">
          <v-sheet class="d-flex flex-row ma-4">
            <v-avatar class="ma-auto" color="grey-lighten-4" size="50">
              <v-img :src="authStore.getAvatar_file_url"></v-img>
            </v-avatar>
            <v-card-title>{{ user.username }}</v-card-title>
            <v-spacer/>
          </v-sheet>
          <v-sheet class="d-flex flex-row ma-4">
            <v-spacer/>
            <v-card-subtitle>算力余额：{{ user.balance }}</v-card-subtitle>
          </v-sheet>

        </v-card>
        <v-card>
          <vertical-menu/>
        </v-card>

      </v-col>
      <v-col cols="9">
        <v-card class="my-4" title="账户信息" prepend-icon="mdi-account">
          <v-window v-model="chargeWindow">
            <v-window-item value="account">
              <v-sheet height="150" class="d-flex flex-row align-center">
                <v-sheet>
                  <v-card-subtitle>账户余额：</v-card-subtitle>
                  <p class="text-h2 font-weight-bold ma-6">{{ user.balance }}<span class="text-h6">算力</span></p>
                </v-sheet>
                <v-spacer/>
                <v-btn color="primary" class="mx-10" @click="navigateTo('/pay/charge')">充值算力</v-btn>
              </v-sheet>

            </v-window-item>
            <v-window-item value="charge">
              <!--              充值算力-->
              <p class="ma-4 text-h6">充值金额:</p>
              <select-items/>
            </v-window-item>


            <v-window-item value="record">
              <!--            消费明细-->
              <v-table
                  fixed-header
              >
                <thead>
                <tr>
                  <th v-for="header in tableHeaders" class="text-left">
                    {{ header.toUpperCase() }}
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in records">
                  <td v-for="key in tableHeaders">
        <span v-if="key === 'order_create_time'||key === 'order_pay_time'">
          {{ new Date(item[key]).toLocaleString() }}
        </span>
                    <!--        显示用户状态 0 正常 1 禁用 3 删除-->
                    <span v-else-if="key === 'order_status'" class="d-flex">
          <v-chip size="x-small" :color="item[key] === 1 ? 'green' : 'red'">
            {{ item[key] === 1 ? '已支付' : '未支付' }}
          </v-chip>
                      <!--          <v-btn @click="handleAdminUpdateUserStatus(user._id,user[key] === 0 ? 1 : 0)" size="x-small" :color="user[key] === 0 ? 'warning' : 'green'">-->
                      <!--            {{user[key] === 0 ? '禁用' : '启用'}}-->
                      <!--          </v-btn>-->
        </span>
                    <span v-else-if="key === 'amount'">
          {{ item[key]?.total/100 }}
        </span>
                    <span v-else-if="key === 'payer'">
          {{ item[key]?.openid }}
        </span>
                    <span v-else>
          {{ item[key] }}
        </span>
                  </td>
                </tr>
                </tbody>
              </v-table>

            </v-window-item>
          </v-window>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped lang="scss">

</style>